<template>
  <view class="icon-group" @click="handleIconClick(item)">
    <image :src="currentIconU(item)" class="icon-x"/>
    <image :src="currentIconD(item)" class="icon-s"/>
  </view>
</template>
<script>
export default {
  name: "myIcon",
  props: {
    item: Object,
    index: String | Number,
  },
  data() {
    return {
      iconStatus: null,
      clickDate: null
    }
  },
  methods: {
    handleIconClick() {
      //节流
      const now = Date.now()
      if (now - this.clickDate < 700) {
        return
      }
      this.clickDate = Date.now()
      this.iconStatus = this.iconStatus == null ? true : !this.iconStatus
      this.currentIconU()
      this.currentIconD()
      // 查询
      this.$emit('click', {column: this.item.text, order: this.iconStatus ? "asc" : "desc", index: this.index});
    },
    /**
     * ▲点击切换图标
     */
    currentIconU() {
      return this.item.iconU[this.iconStatus == null ? 0 : (this.iconStatus ? 1 : 0)]
    },
    /**
     * ▼ 点击切换图标
     */
    currentIconD() {
      return this.item.iconD[this.iconStatus == null ? 0 : (this.iconStatus ? 0 : 1)]
    },
    /**
     * 重置按钮状态
     */
    reset() {
      if (this.iconStatus != null)
        this.iconStatus = null
    }
  }
}
</script>
<style scoped lang="scss">
.icon-group {
  display: flex;
  flex-direction: column;
  margin-left: 8rpx;
}

.icon-x, .icon-s {
  width: 10rpx;
  height: 10rpx;
  margin: 4rpx 0;
}

/* 点击动画效果 */
.icon-x {
  transition: transform 0.2s ease;
}

.icon-x:active {
  transform: scale(0.9);
}
</style>